<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        function BoilingVerdict(props) {
            if (props.celsius >= 100) {
                return (<h1>水沸腾了</h1>)
            } else {
                return (<h1>水还没有沸腾</h1>)
            }
        }
        class Calculator extends React.Component {
            constructor(props) {
                super(props)
                this.state = { temperature: '', scale: 'c' }
                this.handleChange = this.handleChange.bind(this)
                this.handleCelsiusChange = this.handleCelsiusChange.bind(this)
                this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this)
            }
            handleChange(e) {
                console.log(e)
                console.log(e.target)
                console.log(e.target.value)
                this.setState({ temperature: e.target.value })

            }
            handleCelsiusChange(temperature) {
                this.setState({ scale: 'c', temperature });
            }

            handleFahrenheitChange(temperature) {
                this.setState({ scale: 'f', temperature });
            }

            render() {
                console.log(this)
                const temperature = this.state.temperature;
                const scale = this.state.scale;
                const celsius = scale == 'f' ? tryConvert(temperature, toCelsius) : temperature
                const fahrenheit = scale == 'c' ? tryConvert(temperature, toFahrenheit) : temperature
                return (
                    <fieldset>

                        <TemperatureInput
                            scale="c"
                            temperature={celsius}
                            onTemperatureChange={this.handleCelsiusChange} />
                        <TemperatureInput
                            scale="f"
                            temperature={fahrenheit}
                            onTemperatureChange={this.handleFahrenheitChange} />
                        <BoilingVerdict celsius={parseFloat(celsius)} />
                    </fieldset>
                )
            }
        }
        /**
        将温度输入框单独脱离出来，将其 
        我们知道 props 是只读的。当 temperature 存在于 
        TemperatureInput 组件的 state 中时，组件调用 
        this.setState() 便可修改它。然而，temperature 是由父组
        件传入的 prop，TemperatureInput 组件便失去了对它的控制权。
        */
        const temperatureType = {
            c: 'ccccccc',
            f: 'ffffff'
        }
        function tryConvert(temperature, convert) {
            const input = parseFloat(temperature);
            if (Number.isNaN(input)) {
                return '';
            }
            const output = convert(input);
            const rounded = Math.round(output * 1000) / 1000;
            return rounded.toString();
        }
        function toCelsius(fahrenheit) {
            return (fahrenheit - 32) * 5 / 9;
        }

        function toFahrenheit(celsius) {
            return (celsius * 9 / 5) + 32;
        }
        class TemperatureInput extends React.Component {
            constructor(props) {
                super(props)
                const { temperature, scale } = props
            }
            handleChange = (e) => {
                this.props.onTemperatureChange(e.target.value);
            }
            render() {
                console.log(this)
                const temperature = this.props.temperature;
                const scale = this.props.scale;
                return (
                    <div>
                        <h1>{temperatureType[scale]}</h1>
                        <input value={temperature} onChange={this.handleChange} />

                    </div>
                )
            }

        }
        ReactDOM.render(<Calculator />, document.getElementById('test'))



    </script>
</body>

</html>